import React from 'react'
import Logo from '../../component/logo/logo'
import { Redirect } from 'react-router-dom'
import { WingBlank, WhiteSpace, Button, InputItem, List, Radio } from 'antd-mobile';
import './style.css'
//使用react-redux 实现数据连接  在组件中直接引入 reducer 文件
import { connect } from 'react-redux'
//因为这个文件里有action.type
import { register } from '../../redux/user_redux'

@connect(
    state =>  state.user,
        { register }  //在 store 传过来的值 
)

class Register extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            // msg: '',
            user: '',
            pwd: '',
            repeatpwd: '',
            type: 'genius'  //牛人，天才
        }

        //所有的绑定事件 性能优化
        this.handleRegister = this.handleRegister.bind(this)
    }

    handleChange(key, val) {
        this.setState({
            [key]: val
        }) 
    }
    handleRegister() {
        console.log(this.state)
        //通过connect 连接reducer 管理的数据 ,将this.state 传到 连接reducer
        this.props.register(this.state)
    }

    render() {
        const RadioItem = Radio.RadioItem
        return (
            <div>
                {this.props.redirectTo ? <Redirect to={this.props.redirectTo} /> : null}
                <Logo />
                <WingBlank>
                    <List>
                        {this.props.msg ? <p className="error_msg">{this.props.msg}</p> : null}
                        <InputItem
                            onChange={item => this.handleChange('user', item)}
                        >用户名</InputItem>
                        <InputItem
                            type="password"
                            onChange={item => this.handleChange('pwd', item)}
                        >密码</InputItem>
                        <InputItem
                            type="password"
                            onChange={item => this.handleChange('repeatpwd', item)}
                        >确认密码</InputItem>
                        <RadioItem
                            checked={this.state.type == "genius"}
                            onChange={() => this.handleChange('type', 'genius')}
                        >牛人</RadioItem>
                        <RadioItem
                            checked={this.state.type == "boss"}
                            onChange={() => this.handleChange('type', 'boss')}
                        >Boss</RadioItem>
                        <WhiteSpace />
                        <Button type="primary" onClick={this.handleRegister}>注册</Button>
                    </List>
                </WingBlank>
            </div>
        )
    }
}

export default Register